<template>
  <div id="nav-bar-tab">
    <el-menu :default-active="activeIndex" background-color="#00000000" active-text-color="#FFC600" class="el-menu-demo"
      mode="horizontal" @select="handleSelect" :router="true">
      <el-menu-item class="nav-bar-tab-item" index="/stat/general">
        考核统计
      </el-menu-item>
      <el-menu-item class="nav-bar-tab-item" index="/ops/table">
        运维管理
      </el-menu-item>
      <el-submenu class="nav-bar-tab-item nav-bar-tab-submenu" index="profile">
        <template slot="title">档案管理</template>
        <el-menu-item class="second-nav-bar-item" index="/video/downLoad">视频下载管理</el-menu-item>
        <el-menu-item class="second-nav-bar-item" index="/contact/manager">通信录管理</el-menu-item>
      </el-submenu>
      <el-submenu class="nav-bar-tab-item nav-bar-tab-submenu" index="form/mananger">
        <template slot="title">表单管理</template>
        <el-submenu class="second-nav-bar-item nav-bar-tab-submenu" index="/stat/ops">
          <template slot="title">运维统计</template>
          <el-menu-item class="second-nav-bar-item" index="/stat/general/history">考核评分历史统计</el-menu-item>
          <el-menu-item class="second-nav-bar-item" index="/stat/video/diagnosis">视频质量诊断统计</el-menu-item>
          <el-menu-item class="second-nav-bar-item" index="/stat/videoTrap/integrityRate">录像完整率统计</el-menu-item>
          <el-menu-item class="second-nav-bar-item" index="/stat/deviceOnline">设备在线状态统计</el-menu-item>
        </el-submenu>
        <el-submenu class="second-nav-bar-item nav-bar-tab-submenu" index="/stat/env">
          <template slot="title">环境统计</template>
          <el-menu-item class="second-nav-bar-item" index="/stat/room/env/exception">机房环境异常统计</el-menu-item>
          <el-menu-item class="second-nav-bar-item" index="/stat/room/energyConsumptionn">机房环境能耗统计</el-menu-item>
        </el-submenu>
        <el-submenu class="second-nav-bar-item nav-bar-tab-submenu" index="/stat/alarm">
          <template slot="title">告警统计</template>
          <el-menu-item class="second-nav-bar-item" index="/stat/alarm/type">告警类型统计</el-menu-item>
          <el-menu-item class="second-nav-bar-item" index="/stat/alarm/level">告警等级统计</el-menu-item>
          <el-menu-item class="second-nav-bar-item" index="/stat/alarm/history">告警历史记录</el-menu-item>
        </el-submenu>
        <el-submenu class="second-nav-bar-item nav-bar-tab-submenu" index="/log">
          <template slot="title">日志管理</template>
          <el-menu-item class="second-nav-bar-item" index="/log/login">用户登录日志</el-menu-item>
          <el-menu-item class="second-nav-bar-item" index="/log/operation">用户操作日志</el-menu-item>
        </el-submenu>

      </el-submenu>
      <el-submenu class="second-nav-bar-item nav-bar-tab-submenu" index="/manager">
        <template slot="title">配置管理</template>
        <el-menu-item class="second-nav-bar-item" index="/user/manager">用户管理</el-menu-item>
        <el-menu-item class="second-nav-bar-item" index="/role/manager">角色管理</el-menu-item>
        <el-menu-item class="second-nav-bar-item" index="/branch/manager">机构管理</el-menu-item>
        <el-menu-item class="second-nav-bar-item" index="/room/manager">机房配置</el-menu-item>
        <el-menu-item class="second-nav-bar-item" index="/envMonitor/manager">环境检测器配置</el-menu-item>
        <el-menu-item class="second-nav-bar-item" index="/device/video/manager">录像设备配置</el-menu-item>
        <el-menu-item class="second-nav-bar-item" index="/terminal/manager">终端列表</el-menu-item>
        <el-menu-item class="second-nav-bar-item" index="/sms/manager">短信配置</el-menu-item>
        <el-menu-item class="second-nav-bar-item" index="/interfaceGateWay/manager">接口网关配置</el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
  export default {
    name: 'NavBarTab',
    data() {
      return {
        activeIndex: '/generalStat'
      }
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log("key:" + key + "   keyPath:" + keyPath);
      }
    }
  }
</script>


<style>
  .nav-bar-tab-item {
    border-left: 1px solid #ebebeb;
  }
</style>
